<template>
	<view class="index">
		<mescroll-uni ref="mescrollRef" height="100%" @init="mescrollInit" bottom="10" :down="downOption"
			@down="downCallback" :up="upOption" @up="upCallback">
			<!-- 数据列表 -->
			<view class="item-wrapper" v-for="(item,index) in list" :key="index">
				<view class="customer-wrapper">
					<view class="item">
						<view class="line"></view>
						<text>客户：{{ item.customerPetName }}</text>
					</view>
					<view class="item" @click="callPhone(item.customerTel)">
						{{ item.customerTel }}
					</view>
				</view>
				<view class="product-item">
					<view class="product-name">
						<view class="name">
							{{ item.productName }}
						</view>
					</view>
					<view class="product-info">
						<view class="item">
							毛重：{{ item.grossWeight }}斤
						</view>
						<view class="item">
							净重：{{ item.netWeight }}斤
						</view>
						<view class="item">
							货号：{{ item.productCode }}
						</view>
						<view class="item">
							订货量：{{ item.quantity }} 件
						</view>
					</view>
					<view class="product-number">
						<view class="label">
							实配数量
						</view>
						<input type="number" disabled v-model="item.actualQuantity" placeholder="输入实配数量"
							class="input" />
						<view class="unit">
							件
						</view>
					</view>
					<view class="tip" v-if="item.actualQuantity && item.actualQuantity < item.quantity">
						<uni-icons type="info-filled" color="#F26022" size="20"></uni-icons>
						<text>缺货{{ item.quantity - item.actualQuantity }}件：提货后由城市仓发起售后为客户退款</text>
					</view>
				</view>
				<view class="btn-wrapper">
					<view class="btn" @click="afterSale(item)">
						发起售后
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		data() {
			return {
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					textNoMore: '没有更多啦~',
					noMoreSize: 3, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						fixed: true,
						top: '200upx',
						tip: '~ 空空如也 ~', // 提示
						icon: 'https://sm.hobon.cc/static/hobon_noorder.png'
					}
				},
				isLoading: true,
				list: [],
			}
		},
		onShow() {
			this.downCallback()
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			async upCallback(page) {
				this.pageNum = page.num;
				const params = {
					pickupPointId: this.$store.state.userInfo.pickupPointId,
					orders: [{
						"asc": false,
						"column": "id"
					}],
				};
				const data = await this.$api.post('/app/deliver/order/getDeliverShortList', params, false)
				if (data.code === 200) {
					this.isLoading = false;
					this.list = data.data;
					this.mescroll.endBySize(data.data.length, 1);
				} else {
					this.mescroll.endErr();
				}
			},
			afterSale(item) {
				const obj = {
					...item
				}
				obj.mobilePhone = item.customerTel;
				obj.serviceTel = item.supplierTel || '';
				obj.orderDate = item.orderDate.substring(0, 10)
				uni.setStorageSync('afterSaleApplyProductInfo', obj)
				uni.navigateTo({
					url: '/subPage_afterSale/apply?type=1'
				})
			},
			goDetail(item) {
				uni.navigateTo({
					url: "/subPage_testing/testingDetail?id=" + item.id
				})
			},
			callPhone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;
		overflow: hidden;

		.item-wrapper {
			margin: 20upx 20upx 0 20upx;
			border-radius: 20upx;
			background-color: #ffffff;
			overflow: hidden;

			.customer-wrapper {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0upx 20rpx;
				height: 80rpx;
				background-color: #F5F6FA;

				.line {
					min-width: 6upx;
					height: 30upx;
					background-color: #F26022;
					position: relative;
					margin-right: 10upx;
				}

				.item {
					display: flex;
					align-items: center;
				}
			}

			.product-item {
				background-color: #ffffff;
				border-radius: 20upx;
				overflow: hidden;
				padding: 20upx;

				.product-name {
					display: flex;



					.name {
						font-weight: bold;
						font-size: 32upx;
						color: #212121;
					}
				}

				.product-info {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.item {
						width: 50%;
						font-size: 28upx;
						color: #666666;
						margin-top: 14upx;
					}
				}

				.product-number {
					display: flex;
					align-items: center;
					margin: 20upx 0 0 0;
					border-top: 1upx dashed #efefef;
					padding-top: 20upx;
					font-size: 32upx;
					font-weight: bold;

					.input {
						flex: 1;
						text-align: center;
					}
				}

				.tip {
					display: flex;
					align-items: center;
					font-size: 28upx;
					color: #F26022;
					margin-top: 10upx;
				}
			}

			.btn-wrapper {
				height: 100upx;
				width: 100%;
				background-color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding-right: 30rpx;
				border-top: 1upx dashed #dedede;

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 60upx;
					width: 150rpx;
					color: #232323;
					background-color: #ffffff;
					border: 1upx solid #bebebe;
					border-radius: 10rpx;
					font-size: 28upx;
					margin-right: 30rpx;
				}
			}
		}
	}
</style>